<template>
  <div v-loading="fullLoading" element-loading-text="加载中">
    <div class="bgc-default pad-20">
      <div class="bg-color-white pad-20">
        <el-steps :active="activeNum" class="step-bar mar-t-30 mar-b-30" finish-status="success" align-center>
          <el-step title="买家下单"></el-step>
          <el-step :title="orderInfo.enterprisePayFlag == 1 ? '企业付款' : '买家付款'"></el-step>
          <el-step v-if="isStorePickUpOrder" :title="'待买家上门提货'"></el-step>
          <el-step v-else-if="isGroupBuyOrder" :title="'配送至团长'"></el-step>
          <el-step v-else-if="isStoreHomeDeliveryOrder" :title="'配送至卖家'"></el-step>
          <el-step v-else :title="'商家发货'"></el-step>
          <el-step v-if="isGroupBuyOrder" :title="'买家提货'"></el-step>
          <el-step v-else :title="'买家收货'"></el-step>
          <el-step title="订单完成"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="bgc-default pad-l-20 pad-r-20 pad-b-20">
      <div>
        <el-row :gutter="20">
          <!-- 买家信息 -->
          <el-col :span="showBox === 1 ? 8 : 6">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">基本信息</div>
                <el-button v-if="changeReveiveFlag" size="mini" @click="doOpenReceiveInfo">修改收货信息
                </el-button>
                <template v-if="orderInfo.encryptReceiveFlag == 1">
                  <el-tooltip class="item" effect="dark" content="点击查看收货信息" placement="top-start">
                    <img :src="isLock ? lockIcon : unlockIcon" class="width-24 cursor-p mar-l-20" @click="doDecrypt(0)">
                  </el-tooltip>
                </template>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-72">订单编号：</div>
                  <div class="flex-item">{{ orderInfo.orderNo ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">创建时间：</div>
                  <div class="flex-item">{{ orderInfo.createTime ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">支付时间：</div>
                  <div class="flex-item">{{ orderInfo.payTime ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">付款方式：</div>
                  <div class="flex-item">{{ dict.payType[orderInfo.payType] ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">{{!isGroupBuyOrder? '顾客名称：' : '提货人：'}}</div>
                  <div class="flex-item">{{ orderInfo.customerNickname ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">顾客电话：</div>
                  <div class="flex-item">{{ orderInfo.customerPhone ||  '&nbsp;' }}</div>
                </div>
                <div class="flex" v-if="!isGroupBuyOrder">
                  <div class="font-color-9 width-72">配送方式：</div>
                  <div class="flex-item">{{ dict.deliveryType[orderInfo.deliveryType] ||  '&nbsp;' }}
                  </div>
                </div>
                <div class="flex" v-if="isGroupBuyOrder">
                  <div class="font-color-9 width-72">提货地点：</div>
                  <div class="flex v-align-c cursor-p">
                    <label><img :src="orderInfo.memberTakeStoreImage" class="user-avatar cursor-p"
                        v-if="orderInfo.memberTakeStoreImage"></label>
                    <div class="font-12 pad-l-10 font-w">
                      <div>{{orderInfo.memberTakeAddress}}</div>
                      <div><span style="color: red;">{{orderInfo. memberTakeStoreType}}</span>
                      </div>
                      <div>{{orderInfo.memberTakeStoreName}}</div>
                    </div>
                  </div>
                </div>
                <div class="flex" v-else-if="isStorePickUpOrder">
                  <div class="font-color-9 width-72">提货地点：</div>
                  <div class="flex-item">
                    {{ orderInfo.memberTakeAddress  ||  '&nbsp;' }}
                  </div>
                </div>
                <div class="flex" v-else>
                  <div class="font-color-9 width-72">收货地址：</div>
                  <div class="flex-item">
                    {{ orderInfo.customerFullAddress  ||  '&nbsp;' }}
                    <a href="javascript:;" @click="doCopy(orderInfo, $event)"><span
                        class="mar-l-10 font-blue">复制</span></a>
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">备注留言：</div>
                  <div class="flex-item">{{ orderInfo.customerComment ||  '&nbsp;' }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 订单信息 -->
          <el-col :span="showBox === 1 ? 8 : 6">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">订单信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-72">订单状态：</div>
                  <div class="flex-item">
                    <div class="mar-t--15 mar-b--5">
                      <b class="font-26" :class="orderInfo.orderStatusColor">
                        <span>{{this.comOrderStatus() ||  '&nbsp;'}}</span>
                      </b>
                    </div>
                  </div>
                </div>
                <div class="flex" v-if="!isGroupBuyOrder && !isStoreHomeDeliveryOrder && !isStorePickUpOrder">
                  <div class="font-color-9 width-72">订单类型：</div>
                  <div class="flex-item">{{ dict.orderType[orderInfo.orderType] }}</div>
                </div>
                <div class="flex" v-else-if="!isGroupBuyOrder">
                  <div class="font-color-9 width-72">订单类型：</div>
                  <div class="flex-item" v-if="isStoreHomeDeliveryOrder">到家配送</div>
                  <div class="flex-item" v-if="isStorePickUpOrder">门店自提</div>
                </div>
                <div v-if="!isGroupBuyOrder && !isStoreHomeDeliveryOrder && !isStorePickUpOrder">
                  <div class="flex">
                    <div class="font-color-9 width-72">快递公司：</div>
                    <div class="flex-item">{{ orderInfo.expressName ||  '&nbsp;' }}</div>
                  </div>
                  <div class="flex">
                    <div class="font-color-9 width-72">快递单号：</div>
                    <div class="flex-item">
                      {{ orderInfo.trackingNo ||  '&nbsp;' }}
                      <a v-if="orderInfo.trackingNo" href="javascript:;" @click="doOpenLogistics(orderInfo)">
                        <span class="mar-l-10 font-blue">查看物流</span>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="flex" v-if="isGroupBuyOrder || isStoreHomeDeliveryOrder">
                  <div class="font-color-9 width-72">配送单号：</div>
                  <div class="flex-item">{{ orderInfo.deliveryNo ||  '&nbsp;' }}</div>
                </div>
                <div class="flex" v-if="isGroupBuyOrder">
                  <div class="font-color-9 width-72">配送时间：</div>
                  <div class="flex-item">{{ orderInfo.deliveryTime ||  '&nbsp;' }}</div>
                </div>
                <div class="flex" v-if="isGroupBuyOrder">
                  <div class="font-color-9 width-100">团长签收时间：</div>
                  <div class="flex-item">{{ orderInfo.memberReceivedTime ||  '&nbsp;' }}</div>
                </div>
                <div class="flex" v-if="!isStorePickUpOrder && !isGroupBuyOrder ">
                  <div v-if="isStoreHomeDeliveryOrder && orderInfo.orderStatus === 1">
                    <div class="font-color-9 width-100">预计发货时间：</div>
                  </div>
                  <div v-else>
                    <div class="font-color-9 width-75">发货时间：</div>
                  </div>
                  <div class="flex-item">{{ orderInfo.deliveryTime ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-100">
                    {{isGroupBuyOrder || isStorePickUpOrder ? '顾客提货时间：' : '顾客收货时间：'}}
                  </div>
                  <div class="flex-item">
                    {{ isGroupBuyOrder || isStorePickUpOrder ? orderInfo.deliveryTime : orderInfo.receivedTime}}
                  </div>
                </div>
                <div class="flex" v-if="!isGroupBuyOrder">
                  <div class="font-color-9 width-100">订单完成时间：</div>
                  <div class="flex-item">{{ orderInfo.completeTime ||  '&nbsp;' }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 团长/门店信息 -->
          <el-col :span="showBox === 1 ? 8 : 6"
            v-if="isGroupBuyOrder || isStorePickUpOrder || isStoreHomeDeliveryOrder">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16" v-if="isGroupBuyOrder">团长/门店信息</div>
                <div class="flex-item font-w font-16" v-if="isStorePickUpOrder || isStoreHomeDeliveryOrder">门店信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex v-align-c cursor-p"
                  v-if="orderInfo.commanderId && orderInfo.commanderId > 0 && orderInfo.shopMember">
                  <label><img :src="orderInfo.shopMember.avatar" class="user-avatar cursor-p"
                      v-if="orderInfo.shopMember.avatar"></label>
                  <div class="font-14 pad-l-10">
                    <div><span class="font-color-9">昵称：</span>{{orderInfo.shopMember.nickname}}
                    </div>
                    <div><span class="font-color-9">手机：</span>{{orderInfo.shopMember.phone}}
                    </div>
                  </div>
                </div>
                <div class="flex v-align-c cursor-p"
                  v-if="(!orderInfo.commanderId || orderInfo.commanderId <= 0) && orderInfo.memberStore">
                  <label><img :src="orderInfo.memberStore.storeImage" class="user-avatar cursor-p"
                      v-if="orderInfo.memberStore.storeImage"></label>
                  <div class="font-14 pad-l-10">
                    <div><span class="font-color-9">名称：</span>{{orderInfo.memberStore.storeName}}
                    </div>
                    <div><span class="font-color-9">账号：</span>{{orderInfo.memberStore.storePhone}}
                    </div>
                  </div>
                </div>
                <div class="flex" v-if="orderInfo.memberCommission && orderInfo.memberCommission > 0">
                  <div class="font-color-9 width-90">获得佣金：</div>
                  <div class="flex-item">{{orderInfo.memberCommission}}</div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 分销信息 -->
          <el-col :span="showBox === 1 ? 8 : 6"
            v-else-if="orderInfo.orderType == 30 && (!isGroupBuyOrder && !isStorePockUpOrder && !isStoreHomeDeliveryOrder)">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">分销微客</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-90">{{isGroupBuyOrder ? '团长头像：' : '微店主头像：'}}</div>
                  <div class="flex-item"><img :src="orderInfo.shopMember.avatar" height="50px"></div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-90">{{isGroupBuyOrder ? '团长昵称：' : '微店主昵称：'}}</div>
                  <div class="flex-item">{{ orderInfo.shopMember.nickname ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-90">联系电话：</div>
                  <div class="flex-item">{{ orderInfo.shopMember.phone ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-90">获得佣金：</div>
                  <div class="flex-item">{{ orderInfo.memberCommission ||  '&nbsp;' }}</div>
                </div>
                <div v-if="orderInfo.shareCommission">
                  <div class="flex">
                    <div class="font-color-9 width-90">分销商昵称：</div>
                    <div class="flex-item">{{ orderInfo.shareMember.nickname ||  '&nbsp;' }}</div>
                  </div>
                  <div class="flex">
                    <div class="font-color-9 width-90">联系电话：</div>
                    <div class="flex-item">{{ orderInfo.shareMember.phone ||  '&nbsp;' }}</div>
                  </div>
                  <div class="flex">
                    <div class="font-color-9 width-90">获得佣金：</div>
                    <div class="flex-item">￥{{ orderInfo.shareCommission ||  '&nbsp;' }}</div>
                  </div>
                </div>
                <div v-if="getVersionType() == 5">
                  <div class="flex">
                    <div class="font-color-9 width-100">订单来源小区：</div>
                    <div class="flex-item">{{ orderInfo.memberVillageName ||  '&nbsp;' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 主播信息 -->
          <el-col :span="showBox === 1 ? 8 : 6" v-if="orderInfo.anchorMember && orderInfo.anchorMember.memberId">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">主播信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-72">头像：</div>
                  <div class="flex-item"><img :src="orderInfo.anchorMember.avatar" height="50px">
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">昵称：</div>
                  <div class="flex-item">{{ orderInfo.anchorMember.nickname ||  '&nbsp;' }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">联系电话：</div>
                  <div class="flex-item">{{ orderInfo.anchorMember.phone ||  '&nbsp;' }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="bgc-default pad-l-20 pad-r-20 pad-b-20">
      <div class="bg-color-white pad-l-20 pad-r-20 pad-b-20 pad-t-10">
        <!-- 商品信息 -->
        <div class="tabs-box">
          <el-tabs value="goodsInfo">
            <el-tab-pane label="商品信息" name="goodsInfo">
              <el-table :data="orderGoodsList">
                <el-table-column min-width="280px" label="订单信息">
                  <template slot-scope="scope">
                    <div class="flex v-align-c cursor-p">
                      <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl"
                          class="t-goods-pic"></label>
                      <div class="font-12 pad-l-10 line-2">{{scope.row.goodsTitle}}
                        <div class="font-12 font-w font-orange" v-if="scope.row.promotionTitle">
                          活动：{{scope.row.promotionTitle}}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="180px" label="规格" prop="skuDetail" align="left">
                  <template slot-scope="scope">
                    <div class="font-blue">
                      {{ scope.row.skuDetail ? scope.row.skuDetail : '无' }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="180px" label="推广者" align="left"
                  v-if="!isGroupBuyOrder && !isStoreHomeDeliveryOrder && !isStorePickUpOrder">
                  <template slot-scope="scope">
                    <span v-if="scope.row.distributorName">昵称：{{ scope.row.distributorName }}</span>
                    <br v-if="scope.row.distributorName">
                    <span v-if="scope.row.distributorId">id：{{ scope.row.distributorId }}</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="orderInfo.enterprisePayFlag == 1" width="135px" label="待付运费" align="center">
                  <template slot-scope="scope">
                    <div>￥{{ scope.row.freight }}</div>
                  </template>
                </el-table-column>

                <el-table-column width="120px" label="商品单价" prop="goodsPrice" align="right">
                </el-table-column>

                <el-table-column v-if="orderInfo.sellApartOrderId != null" width="120px" label="销方商品单价"
                  prop="sellGoodsPrice" align="right">
                </el-table-column>

                <el-table-column width="120px" label="供应价" align="center">
                  <template slot-scope="scope">
                    <div>
                      <span v-if="scope.row.supplyOrderGoodsId">￥{{ scope.row.supplyAlliancePrice }}</span>
                      <span v-else>{{ scope.row.goodsSupplyPrice ? '￥' + scope.row.goodsSupplyPrice : '' }}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column width="135px" label="数量">
                  <template slot-scope="scope">
                    <div>商品数：{{ scope.row.goodsNum }}</div>
                    <div>发货数：{{ scope.row.deliveryNum }}</div>
                    <div>售后数：{{ scope.row.afterSaleGoodsNum }}</div>
                    <div>截停数：{{ scope.row.stopNum }}</div>
                  </template>
                </el-table-column>
                <el-table-column width="135px" label="售后状态">
                  <template slot-scope="scope">
                    <div>
                      {{ orderInfo.orderType == 33 || orderInfo.orderType == 34
                      ? dict.platformAfterSaleStatus[scope.row.platformAfterSaleStatus] : dict.afterSaleStatus[scope.row.afterSaleStatus]}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="135px" label="金额" prop="goodsTotalPrice" align="right">
                </el-table-column>
                <el-table-column width="135px" label="计税金额" prop="comprehensiveTaxRate" align="center">
                  <template slot-scope="scope">
                     <div> ￥{{ (scope.row.totalTaxAmount - scope.row.goodsFreight).toFixed(2) }}</div> 
                     <div>商品: ￥{{ scope.row.goodsTotalPrice - scope.row.couponReduceAmount }}</div>
                     <!-- <div>运费: ￥{{ scope.row.goodsFreight }}</div> -->
                  </template>
                </el-table-column>
                <el-table-column width="135px" label="税额" prop="comprehensiveTaxRate" align="center">
                  <template slot-scope="scope">
                    <div> {{ scope.row.taxRate }}%</div>
                    <div>￥{{ scope.row.taxAmount }}</div>
                  </template>
                </el-table-column>
                <el-table-column width="160px" label="来源" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.supplierName || dict.source[scope.row.source] || '总部' }}</div>
                  </template>
                </el-table-column>
                <el-table-column width="160px" label="发货仓" prop="warehouseName" align="center" v-if="!isGroupBuyOrder">
                </el-table-column>
                <el-table-column v-if="orderInfo.enterprisePayFlag == 1" width="160px" label="异常" prop="exceptionReason"
                  align="left">
                </el-table-column>
                <el-table-column v-show="isGroupBuyOrder" width="135px" label="备注" prop="SellerWords" align="left">
                  <template slot-scope="scope">
                    <el-button type="text" @click="showSellerWords(scope.row)">设置</el-button>
                    <span>{{scope.row.sellerWords}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <table class="table-foot">
                <tr v-if="orderInfo.couponReduceAmount">
                  <td class="left">优惠金额：</td>
                  <td>￥{{ orderInfo.couponReduceAmount }}</td>
                </tr>
                <tr>
                  <td class="left">商品小计：</td>
                  <td>￥{{ orderInfo.goodsAmount ||  '&nbsp;' }}</td>
                </tr>
                <tr v-if="orderInfo.deliveryType && orderInfo.deliveryType !== 5">
                  <td class="left">运费：</td>
                  <td>￥{{ orderInfo.freight }}</td>
                </tr>
                <tr v-if="orderInfo.deliveryType && orderInfo.deliveryType === 5">
                  <td class="left">配送费：</td>
                  <td>￥{{ orderInfo.deliveryFee }}</td>
                </tr>
                <tr>
                  <td class="left">订单合计：</td>
                  <td>￥{{ orderInfo.orderPrice }}</td>
                </tr>
                <tr v-if="orderInfo.orderType == 30 && !isGroupBuyOrder">
                  <td class="left">分销佣金：</td>
                  <td>￥{{ (orderInfo.memberCommission * 1 + orderInfo.shareCommission * 1).toFixed(2) }}
                  </td>
                </tr>
                <tr v-if="isGroupBuyOrder">
                  <td class="left">团长佣金：</td>
                  <td>￥{{ orderInfo.memberCommission ? orderInfo.memberCommission : 0}}</td>
                </tr>
                <tr v-if="orderInfo.sellApartOrderId">
                  <td class="left">平台佣金：</td>
                  <td>￥{{ orderInfo.supplyAllianceCommission ? orderInfo.supplyAllianceCommission : 0}}
                  </td>
                </tr>
                <tr class="font-22">
                  <td class="left font-black"><b>实际收入：</b></td>
                  <!-- 批发订单为线下支付不扣除易宝手续费 显示金额为订单金额 -->
                  <td class="font-red" v-if="orderInfo.payType == 5">
                    <b>￥{{ orderInfo.orderPrice }}</b>
                  </td>
                  <td class="font-red" v-else><b>￥{{ orderInfo.enterpriseAmount }}</b></td>
                </tr>
                <tr class="font-22" v-if="orderInfo.enterprisePayFlag == 1">
                  <td class="left font-black">待付货款：</td>
                  <td class="font-red"><b>￥{{ orderInfo.orderPriceToThird }}</b></td>
                </tr>
              </table>
            </el-tab-pane>
            <el-tab-pane label="跨境信息" name="croosBorderOrderInfo">
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-140">购买人姓名：</div>
                  <div class="flex-item">{{ orderInfo.certificateRealName }}
                    <el-button type="text" @click="updateCertificateRealName"
                      v-if="orderInfo.orderStatus ===  1 && [1,4].includes(orderInfo.warehouseCustomsStatus) || [1,4,6,7].includes(orderInfo.paymentOrderCustomsStatus)">
                      修改购买人信息</el-button>
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-140">购买人证件类型：</div>
                  <div class="flex-item">{{ dict.certificateType[orderInfo.certificateType] }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-140">购买人证件号：</div>
                  <div class="flex-item">{{ orderInfo.certificateNumber }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-140">发货保税仓：</div>
                  <div class="flex-item">
                    {{ orderGoodsList && orderGoodsList.length > 0 ? orderGoodsList[0].warehouseName : '' }}
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-140">仓库报关状态：</div>
                  <div class="flex-item">{{ dict.warehouseCustomsStatus[orderInfo.warehouseCustomsStatus]  }}</div>
                </div>
                <div class="flex" v-if="orderInfo.warehouseCustomsStatus ===  4">
                  <div class="font-color-9 width-140">仓库报关失败原因：</div>
                  <div class="flex-item">
                    {{ orderInfo.warehouseCustomsStatusRemark  }}
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-140">支付单报关状态：</div>
                  <div class="flex-item">{{ dict.paymentOrderCustomsStatus[orderInfo.paymentOrderCustomsStatus]  }}
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-140">支付单报关结果：</div>
                  <div class="flex-item">
                    {{ orderInfo.paymentOrderCustomsStatusRemark  }}
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="订单操作信息" name="logInfo"
              v-if="!isGroupBuyOrder && !isStoreHomeDeliveryOrder && !isStorePickUpOrder">
              <el-table :data="orderLogList" class="action-table" style="width: 100%">
                <el-table-column min-width="350px" label="操作内容" prop="operatorContent">
                </el-table-column>
                <el-table-column width="150px" label="操作人" prop="operatorName"></el-table-column>
                <el-table-column width="180px" label="操作时间" prop="createTime"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>



        <div class="height-70"></div>
        <div class="bottom-bar">
          <el-button v-if="orderInfo.enterpriseDeliveryFlag == 1 && !warehouseDeliverFlag && !this.getMemberId()" 
            type="primary"
            @click="doOpenDeliver">
            
            <span>发货</span>
          </el-button>
        </div>

        <!-- 发货单管理dialog -->
        <el-dialog width="1200px" v-el-drag-dialog title="发货单管理" :visible.sync="orderDeliverVisible"
          :show-close="false">
          <order-send-manage :showFlag="orderDeliverVisible" :apartOrderId="orderInfo.apartOrderId"
            @callback="doCallbackOrderDeliver">
          </order-send-manage>
        </el-dialog>

        <!-- 订单物流dialog -->
        <el-dialog width="700px" title="物流动态" v-el-drag-dialog :visible.sync="orderLogisticsVisible">
          <express-order-logistics :showFlag="orderLogisticsVisible" 
            :orderNo="orderInfo.orderNo"
            @callback="doCallbackOrderLogistics">
          </express-order-logistics>
        </el-dialog>

        <!-- 订单收货信息dialog -->
        <el-dialog width="600px" title="编辑收货信息" v-el-drag-dialog :visible.sync="orderReceiveInfoVisible">
          <order-receive-info :showFlag="orderReceiveInfoVisible" :orderId="orderInfo.orderId"
            @callback="doCallbackOrderReceive">
          </order-receive-info>
        </el-dialog>
      </div>
    </div>

    <el-dialog width="350px" title="设置备注" v-el-drag-dialog :visible.sync="showSellerWordsVisible">
      <div class="pad-l-20 pad-r-20">
        <el-form>
          <el-form-item>
            <el-input type="textarea" :rows="3" class="width-300" v-model="sellerWords"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSave">保存</el-button>
        <el-button @click="doCancel">取消</el-button>
      </div>
    </el-dialog>

    <UpdateCertificateInfo ref="UpdateCertificateInfoRef" :onSuccess="handleUpdateCertificateInfoSuccess">
    </UpdateCertificateInfo>
  </div>
</template>

<script>
  import {
    getDictByGroupName
  } from '@/api/common/common'
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  import {
    decryptReceiveInfo
  } from '@/api/goods/thirdOrder'
  import {
    getOrder
  } from '@/api/goods/order'
  import {
    saveOrderSellerWords
  } from '@/api/goods/orderGoods'
  
  import unlockIcon from '@/assets/images/unlock-icon.png'
  import lockIcon from '@/assets/images/lock-icon.png'
  import clipboard from '@/utils/clipboard'
  import elDragDialog from '@/directive/el-dragDialog'
  import orderSendManage from '@/views/goods/order/components/order-send-manage'
  import expressOrderLogistics from '@/views/goods/order/components/express-order-logistics'
  import orderReceiveInfo from '@/views/goods/order/components/order-receive-info'
  import UpdateCertificateInfo from '../../components/update-certificate-info'

  export default {
    components: {
      orderSendManage,
      expressOrderLogistics,
      orderReceiveInfo,
      UpdateCertificateInfo
    },
    directives: {
      elDragDialog
    },
    props: {
      orderId: String
    },
    data() {
      return {
        // 企业配置
        enterpriseConfig: {},
        // 订单对象
        orderInfo: {
          orderStatus: '',
          orderStatusColor: 'font-pink',
          shopMember: {},
          shareMember: {},
          anchorMember: {},
          customsStatus: {},
          customsFailReasonType: {}
        },
        orderGoods: {
          orderGoodsId: '',
          sellerWords: ''
        },
        orderGoodsList: [],
        orderLogList: [],
        // 数据字典
        dict: {
          orderStatus: {},
          afterSaleStatus: {},
          platformAfterSaleStatus: {},
          orderType: {},
          stopStatus: {},
          payType: {},
          deliveryType: {},
          source: {},
          warehouseCustomsStatus: {},
          paymentOrderCustomsStatus: {},
          customsFailReasonType: {},
          certificateType: {}
        },
        fullLoading: false,
        // 锁图标
        lockIcon,
        unlockIcon,
        // 锁标识
        isLock: false,
        // 企业仓库发货flag
        warehouseDeliverFlag: false,
        // 修改收货信息flag
        changeReveiveFlag: false,
        // 订单发货visible
        orderDeliverVisible: false,
        // 订单物流visible
        orderLogisticsVisible: false,
        // 订单收货信息visible
        orderReceiveInfoVisible: false,
        activeNum: 1,
        showBox: 1,
        showSellerWordsVisible: false,
        sellerWords: '',
        isStorePockUpOrder: ''
      }
    },
    created() {
      // 获取数据字典
      getDictByGroupName('ProjectOrderDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      getDictByGroupName('ProjectOrderGoodsDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      // 获取企业配置
      getByEnterpriseId(this.getEnterpriseId()).then(response => {
        this.enterpriseConfig = response.data
        this.warehouseDeliverFlag = this.enterpriseConfig.warehouseAuthority === 1 && this
          .enterpriseConfig.warehouseDeliverFlag === 1
      })
      // const query = this.getCurrentPage().query
      this.orderInfo.orderId = this.orderId
      this.init()
    },
    computed: {
      isGroupBuyOrder() {
        return this.orderInfo && this.orderInfo.deliveryType ? this
          .orderInfo.deliveryType === 3 : false
      },
      // 到家自提订单
      isStorePickUpOrder() {
        return this.orderInfo && this.orderInfo.deliveryType ? this
          .orderInfo.deliveryType === 4 : false
      },
      // 到家配送
      isStoreHomeDeliveryOrder() {
        return this.orderInfo && this.orderInfo.deliveryType ? this
          .orderInfo.deliveryType === 5 : false
      }
    },
    methods: {
      // 复制事件
      doCopy(order, event) {
        const text = this.getVersionType() !== 5 ? order.customerFullAddress : order.memberTakeAddress
        clipboard(text, event)
      },
      // 初始化
      init() {
        this.fullLoading = true
        getOrder(this.orderInfo.orderId).then(response => {
          this.fullLoading = false
          if (response.isError) return
          const data = response.data
          if (data.orderGoodsList && data.orderGoodsList.length > 0) {
            data.orderGoodsList.forEach((item) => {
              let totalAmount = 0
              let goodsPayAmount = item.goodsPayAmount
              if (!goodsPayAmount) {
                goodsPayAmount = 0
              }
              let goodsFreight = item.goodsFreight
              if (!goodsFreight) {
                goodsFreight = 0
              }
              totalAmount = parseFloat(goodsPayAmount) + parseFloat(goodsFreight)
              item.totalTaxAmount = totalAmount
            })
          }
          this.orderGoodsList = data.orderGoodsList
          this.orderLogList = data.orderLogList
          this.orderInfo = data
          if (!this.orderInfo.shopMember) {
            this.orderInfo.shopMember = {}
          }
          if (!this.orderInfo.shareMember) {
            this.orderInfo.shareMember = {}
          }
          if (!this.orderInfo.anchorMember) {
            this.orderInfo.anchorMember = {}
          }
          switch (this.orderInfo.orderStatus) {
            default:
            case 0:
            case -10:
              this.activeNum = 1
              this.orderInfo.orderStatusColor = 'font-pink'
              break
            case 1:
              this.activeNum = 2
              this.orderInfo.orderStatusColor = 'font-orange'
              break
            case 2:
              this.activeNum = 3
              this.orderInfo.orderStatusColor = 'font-blue'
              break
            case 3:
              this.activeNum = 4
              this.orderInfo.orderStatusColor = 'font-blue'
              break
            case 4:
              this.activeNum = 5
              this.orderInfo.orderStatusColor = 'font-green'
              break
          }
          this.isLock = this.orderInfo.encryptReceiveFlag === 1
          // 修改收货按钮显示判断
          if (!this.warehouseDeliverFlag &&
            this.orderInfo.orderStatus === 1 &&
            this.orderInfo.orderType !== 33 &&
            this.orderInfo.orderType !== 34 &&
            !this.isGroupBuyOrder
          ) {
            this.changeReveiveFlag = true
          } else {
            this.changeReveiveFlag = false
          }
          if (this.orderInfo.orderType === 30 && this.orderInfo.anchorMember && this.orderInfo
            .anchorMember.memberId) {
            this.showBox = 2
          }
        })
      },
      // 解密事件
      doDecrypt(decryptReportType) {
        if (!this.isLock) {
          // 不再解密
          return
        }
        this.fullLoading = true
        decryptReceiveInfo(this.orderInfo.externalOrderNo, this.orderInfo.externalPlatformType,
          decryptReportType).then(response => {
          this.fullLoading = false
          if (response.isError) return
          this.isLock = false
          const data = response.data
          this.orderInfo.customerNickname = data.customerName
          this.orderInfo.customerPhone = data.customerPhone
          this.orderInfo.customerFullAddress = data.consigneeDetailAddress
        })
      },
      // 返回事件
      doBack() {
        this.$router.go(-1)
      },
      // 打开收货信息dialog事件
      doOpenReceiveInfo() {
        this.orderReceiveInfoVisible = true
      },
      // 订单收货信息回调事件
      doCallbackOrderReceive(callbackFlag) {
        if (callbackFlag) {
          this.init()
        }
        this.orderReceiveInfoVisible = false
      },
      // 打开发货dialog事件
      doOpenDeliver() {
        this.orderDeliverVisible = true
      },
      // 订单发货回调事件
      doCallbackOrderDeliver(callbackFlag) {
        if (callbackFlag) {
          this.init()
        }
        this.orderDeliverVisible = false
      },
      // 打开订单物流dialog事件
      doOpenLogistics() {
        this.orderLogisticsVisible = true
      },
      // 订单物流动态回调事件
      doCallbackOrderLogistics() {
        this.orderLogisticsVisible = false
      },
      showSellerWords(row) { // 打开备注
        this.showSellerWordsVisible = true
        this.orderGoods = row
        this.sellerWords = row.sellerWords
      },
      doSave() { // 备注保存
        this.orderGoods.sellerWords = this.sellerWords
        saveOrderSellerWords(this.orderGoods).then(response => {
          if (response.isError) return
          this.msgSuccess('保存成功！')
          this.showSellerWordsVisible = false
        })
      },
      doCancel() { // 取消
        this.showSellerWordsVisible === true ? this.showSellerWordsVisible = false : this
          .showSellerWordsVisible =
          true
      },
      comOrderStatus(orderStatus) {
        if (!orderStatus) {
          orderStatus = this.orderInfo.orderStatus
        }
        if (this.isGroupBuyOrder) {
          return this.dict.villageOrderStatus[orderStatus]
        }
        if (this.isStorePickUpOrder) {
          return this.dict.storePickUpOrderStatus[orderStatus]
        }
        if (this.isStoreHomeDeliveryOrder) {
          return this.dict.storeHomeDeliveryOrderStatus[orderStatus]
        }
        return this.dict.orderStatus[orderStatus]
      },
      // 修改购买人事件
      updateCertificateRealName() {
        const params = {
          orderId: this.orderInfo.orderId,
          certificateRealName: this.orderInfo.certificateRealName,
          certificateNumber: this.orderInfo.certificateNumber,
          certificateType: this.orderInfo.certificateType
        }
        this.$refs.UpdateCertificateInfoRef.open(params)
      },
      handleUpdateCertificateInfoSuccess(data) {
        this.orderInfo.certificateRealName = data.certificateRealName
        this.orderInfo.certificateNumber = data.certificateNumber
        this.orderInfo.certificateType = data.certificateType
      }
    }
  }
</script>

<style lang="less" scoped>
  .table-foot {
    width: 100%;
    border-bottom: 1px solid #EBEEF5;
    padding: 10px 0;

    .left {
      width: 93%;
      text-align: right;
    }
  }

  /deep/ .action-table.el-table--medium td {
    padding: 32px 0;
  }

  .title-top {
    border-bottom: #eff1f6 1px solid;
  }

  .buyer-info-line {
    line-height: 2.2;
    height: 300px;
    height: auto !important;
    min-height: 300px;
    overflow: visible;
  }

  .user-avatar {
    width: 65px;
    height: 65px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>
